Parent | Child | Previous | Next
 

Using Static Data to Display Events on a Calendar Control

Description

You can use static JSON data to populate the events on a calendar.

images/sd14.png
A calendar control with events defined using static JSON.

For a visual explanation on how to build a calendar control that does this watch this four part video: Part 1, Part 2, Part 3, Part 4, or follow the guide below.

UX Properties Settings

  1. In the UX Builder's UX Properties page scroll down to the 'CSS/SVG' section. Click the [...] button next to the 'Local CSS definitions' property.

    images/de25.png

  2. In the 'CSS Editor - []' open the 'Code' tab at the bottom of the editor.

    images/de26.png

  3. Add the following definition for a 'hiddenItems' css class and click OK.

    .hiddenItem {display: none;}
    images/de27.png
    This css class prevents the dates from previous or later months being displayed on the calendar. For example, if you were looking at the month of August, then the last day of July and the first day of September would not be displayed. This is different from the default setting, which is to number the days of other months but have them appear disabled; using the disabled css class. The .hiddenItem class is called in the calendar's 'Date item out of range class name' property.

  4. Scroll down to the 'Other' section on the Properties list. Find the 'Date format' property and set it to be 'MM/dd/yyyy'.

    images/de2.png

Customize the Calendar Control

  1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [Calendar] option to add a calendar control to the component. Give the control the name 'dt1'.

    images/sd2.png

  2. Highlight the calendar control. In the properties list on the right go to the 'Field Properties' section. Set the 'Default value' to be 2-1-2017.

    images/sd3.png

  3. Scroll down to the 'Date/Time Picker Properties' section. Check the 'Draw boxes around dates' checkbox.

    images/sd4.png

  4. Set the 'Date item hover class name' property to 'None'.

    images/sd5.png

  5. Set the 'Date item selected class name' property to 'None'.

    images/sd6.png

  6. Set the 'Date item out of range class name' to the 'hiddenItem' class.

    images/sd7.png

  7. Click the [...] button next to the 'Date item style' property.

    images/sd8.png

  8. In the Style Editor scroll down to the 'Positioning and Size' section. Set the 'Width' and 'Height' properties to be .5in. Click OK.

    images/sd9.png

  9. Check the 'Has events' property checkbox.

    images/sd10.png

  10. Click the '+' button next to the 'Has events' checkbox to expand the events dropdown. Next to the 'onItemDraw' event type 'calendarDrawItem'.

    images/sd11.png

Definition the calendarDrawItem() and editEvent() Functions

  1. Expand the 'Code' menu and click to open the 'Javascript functions' page.

    images/sd12.png

  2. Add the following definitions for the calendarDrawItem() and the editEvent() functions.

    function calendarDrawItem(ele,date,type) {
var calData = {
    '2017-2-17' : [{id: 1, name: 'event1', detail: 'detail for event 2'}],
    '2017-2-20' : [
         {id: 2, name: 'event2', detail: 'detail for event 2'},
         {id: 3, name: 'event3', detail: 'detail for event 3'}
         ]
    }
    
    if(type == 'date') {
        if(typeof calData != 'undefined') {
             var dateStr = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
             if(typeof calData[dateStr] != 'undefined') {
                  var tempData = calData[dateStr];
                  for(var i = 0; i < tempData.length; i++) {
                      ele.innerHTML = ele.innerHTML + '<br>' + '<a class="{dialog.style}Link" href="#" title="'+tempData[i].detail+'" onclick="editEvent(\''+tempData[i].id+'\');e.stopEvent(event); return false;">' +tempData[i].name + '</a>';
                  }
              }
          }
      }
  }
  
function editEvent(id) {
alert('edit event: ' + id); 
}
    images/sd13.png

  3. Run the component in Live Preview.

    images/sd14.png

How It Works

All of the static data that will be used to populate the calendar control is defined inside the calendarDrawItem() function. This data is stored in a JSON object with the name 'calData'. JSON data is defined using name value pairs, where the value can be either an array or an object. A 'key value' inside the JSON object specifies a value that can be referenced from outside of the JSON data in order to access additional data inside the JSON object. In this example the key value is the day, or 'item', on the calendar where you would like to add some text or information. The first key value shown in the JSON object in this guide is '2017-2-17'. 

'2017-2-17' : [{id: 1, name: 'event1', detail: 'detail for event 2'}]

Each key value is associatted with a javascript array that is defined using square brackets '[...]'.

[{id: 1, name: 'event1', detail: 'detail for event 2'}]

Inside each array, every 'event' that is displayed on the calendar is stored as another javascript object. As with the main JSON object, the 'event' objects are defined using curly braces '{}'. 

{id: 1, name: 'event1', detail: 'detail for event 2'}

In some situations there are multiple 'events' described on a given day. In this case each event is described in its own JSON object. The objects all belong to the same JSON array and are separated from each other by a comma. There is no trailing comma after the last object in the array. 

'2017-2-20' : [
         {id: 2, name: 'event2', detail: 'detail for event 2'},
         {id: 3, name: 'event3', detail: 'detail for event 3'}
         ]

The calendarDrawItem() function has three properties that are passed into it. The first, 'ele', represents the id of the html element that is being drawn. The 'date' property is the date of the element that is currently being drawn. The 'type' property is the type of element that is being drawn. The 'type' property can have a value of either day, month, or year. 

function calendarDrawItem(ele,date,type) {...}

In this example, the only 'type' property value that is important is the 'day' value. This is because only the days on this calendar are being modified. An if statement in the calendarDrawItem() function states that if the 'type' property does in fact equal a date, then the html of the element or 'ele' should be modified by executing a block of code. 

if(type == 'date') {...}

The following code makes sure that there is a defined JSON object that can be used to modify the html element. Because there is a defined JSON object named 'calData', the code block following the if statement can be read. 

if(typeof calData != 'undefined') {...}

The next line of code gets the year, month, and day of the element that was clicked on. It then separates these values with dashes '-' and assigns them to a variable named 'dateStr'. If, for example, a user clicks on the day February 18, 2017 in the calendar, then 'dateStr' will be 2-18-2017. This gives the 'dateStr' variable the same format as the key values described in the 'calData' JSON object. 

var dateStr = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
Because the month value that is returned when a user clicks on an element is a zero based array, it is necessarry to add a +1 in order to get the correct value for the month.

After the date string, 'dateStr', is defined, it is necessary to see if its value matches any of the defined key values in the 'calData' JSON object. If a key value matching 'dateStr' is in fact defined, then another code block is executed that actually draws the 'event' on the calendar. 

if(typeof calData[dateStr] != 'undefined') {...}

To recap, if a user clicks on February 17, 2017 in the calendar control, then the 'dateStr' value will be '2017-2-17'. When the 'dateStr' value is checked against the 'calData' JSON object's key values, then this value will be seen as defined. The code to draw the 'event' associated with the key value can therefore go ahead. Here is the '2017-2-17' key value and its event array in the JSON object. 

'2017-2-17' : [{id: 1, name: 'event1', detail: 'detail for event 2'}],

First a variable named 'tempData' is assigned to the JSON array that is paired with the key value that matches 'dateStr'. 

var tempData = calData[dateStr];

This means that the 'tempData' variable's value is the array containing all of the 'events' for the day that the user clicked on. If the 'dateStr' is '2017-2-17', then tempData's value would be this:

var tempData = calData['2017-2-17'];

Which returns the following object array from the 'calData' JSON object:

[{id: 1, name: 'event1', detail: 'detail for event 2'}]

And so...

var tempData = [{id: 1, name: 'event1', detail: 'detail for event 2'}]

A 'for' statement loops over all of the objects in the tempData JSON array. Javascript arrays are zero based, meaning the first element in the array is a zero, '[0,1,2,3...]'. This is why the variable 'i' in the for loop is assigned the value of '0', 'var i = 0'. The next bit of code, 'tempData.length', gets the length of the tempData JSON array, or the number of 'event' objects defined inside the array. It then sets the 'i' variable to be less then the length. Finally, the 'i++' acts to increment the value of 'i' each time the loop is executed. After the initial 'event' object is drawn 'i++' forces the next 'event' object in the array to be drawn, if there is one.

for(var i = 0; i < tempData.length; i++) {...}

The line of code inside the 'for' loop's definition is actually used to draw the 'ele' element. First this code makes the 'innerHTML' of the html element, or day, that was clicked on equal to itself plus some modifications. A <br> tag skips to the next line in the element. Anchor tags '<a></a>' are then used to add a hyperlink to the element. The hyperlink's CSS style is set to be the same as the UX component's current style. The href value of the hyperlink is set to be a has tag '#' that means there is no href. 

ele.innerHTML = ele.innerHTML + '<br>' + '<a class="{dialog.style}Link" href="#"...></a>

Inside the opening anchor tag, the bubble help in the hyperlink is set to be 'tempData[i].detail'. 

title="'+tempData[i].detail+'"

This sets the hyperlink's bubble help equal to the 'detail' property for each 'event' object in the tempData array. If tempData equals the following array:

[{id: 1, name: 'event1', detail: 'detail for event 2'}]

Then there is only one 'event' object in the array and the 'detail' property in that object looks like this: 

detail: 'detail for event 2'

The hyperlink also has an 'onClick' event. This event is assigned to the editEvent() function that is also defined on the 'Javascript functions' page and that returns a javascript alert. The editEvent() function is passed the 'id' property of the current 'event' object. 

onclick="editEvent(\''+tempData[i].id+'\');

A stopEvent() function is called in order to prevent the 'onClick' event from 'bubbling up' an affecting other parts of the code. 

e.stopEvent(event); return false;"

Inside of anchor tags the 'name' property from the current 'event' object in the tempData array is added. This is the property containing the description of the current event. 

>'+tempData[i].name + '</a>';

The calendarDrawItem function is now complete. After it a simple editEvent() function takes as an argument the 'id' property from the current 'event' object and returns this information in the form of an alert. As previously stated, this function is tied to an onClick event; that is associated with the calendar event's hyperlink when the hyperlink is drawn. 

function editEvent(id) {
alert('edit event: ' + id); 
}

See Also